<template>
  <div class="template-class">
      <div
      class="class-item"
      v-for="(items,i) in barList"
      :key="i"
    >
      <div class="class-item-block">
        <div class="class-item-img">
          <img :src="$store.state.port.ossPath + items.Icon" alt="">
        </div>
        <div class="class-item-label">
          <p>{{items.ClassName}}</p>
          <p>
            <span
              v-for="(item,index) in barList[i].ProductTypeList.slice(0, 2)"
              :key="index"
            >{{item.TypeName}}</span>
          </p>
        </div>
      </div>
      <div class="class-level-item" >
        <div class="class-level-item-label">
          <div class="level-tips">
            <nuxt-link
              v-for="(tmp,id) in items.ProductTypeList"
              :key="id"
              :to="`/templateList/templateCenter?id=${tmp.TypeId}&n=${tmp.FromClass}&k=`"
            >
              <div class="level-tips-item primary-text-hover">
                <div class="tips-icon-wrap">
                  <div
                    class="tips-icon"
                    :style="{'background-image': `url(${$store.state.port.ossPath + tmp.Icon})`}"
                  ></div>
                </div>
                <span>{{tmp.TypeName}}</span>
              </div>
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  props: {
    barList: {}
  },
  data() {
    return {
      isShow: "",
      SecondList: [],
      ClassName: "",
      activeIndex: null
    };
  },
  methods: {
    handleOver(i) {
      this.isShow = "ok";
      this.ClassName = this.barList[i].ClassName;
      this.SecondList = this.barList[i].ProductTypeList;
      this.activeIndex = i;
    },
    handleOut() {
      this.isShow = "";
      this.activeIndex = null;
    },
    enter() {
      this.isShow = "ok";
    }
  }
};
</script>

<style lang="less" scoped>
.template-class {
  position: relative;
  z-index: 100;
  width: 255px;
  // height:375px;
  background: rgba(255, 255, 255, 1);
  box-shadow: -2px 1px 27px 2px rgba(203, 211, 217, 0.4);
  border-radius: 10px;
  user-select: none;
}
.template-class .class-item {
  width: 100%;
  cursor: pointer;
  background: rgba(255, 255, 255, 1);
  transition: all 0.3s ease-out;
  &:hover .class-item-block{
    position: relative;
    background-color: #fff;
    box-shadow: -5px 0px 5px 2px rgba(203, 211, 217, 0.5);
    z-index: 2019;
  }
  &:hover .class-level-item{
    display: block;
  }
}
.template-class .class-item .class-item-block {
  display: flex;
  align-items: center;
  padding: 16px 0 19px 20px;
}
.template-class .class-item .class-item-img {
  height: 100%;
  vertical-align: middle;
  margin-right: 10px;
  img {
    display: inline-block;
    width: 59px;
    height: 100%;
  }
}
.template-class .class-item .class-item-label {
  margin: 5px 0;
}
.template-class .class-item .class-item-label p:first-child {
  line-height: 15px;
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 10px;
}
.template-class .class-item .class-item-label p:last-child {
  height: 12px;
  line-height: 12px;
  font-size: 12px;
  color: rgba(153, 153, 153, 1);
  display: flex;
  span {
    margin: 0 2px;
  }
}
.template-class .class-level-item {
  display: none;
  width: 946px;
  min-height: 100%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 2px 1px 27px 10px rgba(203, 211, 217, 0.4);
  position: absolute;
  top: 0;
  left: 255px;
  border-radius: 0 10px 10px 0;
}
.template-class .class-level-item .class-level-item-label {
  width: 100%;
  height: 100%;
  padding: 60px 0 0 30px;
}
.template-class .class-level-item .class-level-item-label:last-child {
  margin-bottom: 0;
}
.template-class .class-level-item .class-level-item-label .level-title {
  height: 15px;
  line-height: 15px;
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 20px;
}
.template-class .class-level-item .class-level-item-label .level-tips {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  font-size: 14px;
  color: rgba(153, 153, 153, 1);
  .level-tips-item {
    text-align: center;
    height: 100px;
    margin-bottom: 30px;
    cursor: pointer;
    color: rgba(153, 153, 153, 1);
    .tips-icon-wrap {
      display: inline-block;
      width: 68px;
      height: 68px;
      background: rgba(91, 158, 240, 0.1);
      border-radius: 10px;
      .tips-icon {
        display: inline-block;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-position: 50%;
        background-repeat: no-repeat;
      }
    }
    span {
      display: block;
      height: 12px;
      width: 109px;
      line-height: 12px;
      margin-top: 16px;
    }
  }
}

</style>
